<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/index.css" />
    <title>Document</title>
    <link rel="stylesheet" href="../icon/iconfont.css" />
  </head>
  <body>
    <div class="content">
      <div class="header">
        <h2>智慧社区</h2>
        <div class="header-top">
          <div class="top-dw">
            <i class="iconfont icon-dingwei"></i>
            <span>首尔甜城</span>
          </div>
          <div class="top-ss">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" placeholder="搜索关键字" />
          </div>
        </div>
        <div class="header-mian">
          <div class="mian-item">
            <div class="item-img">
              <img src="../images/top-1.png" alt="" />
            </div>
            <p>生活缴费</p>
          </div>
          <div class="mian-item">
            <div class="item-img">
              <img src="../images/top-2.png" alt="" />
            </div>
            <p>物业报修</p>
          </div>
          <div class="mian-item">
            <div class="item-img">
              <img src="../images/top-3.png" alt="" />
            </div>
            <p>问题反馈</p>
          </div>
          <div class="mian-item">
            <div class="item-img">
              <img src="../images/top-4.png" alt="" />
            </div>
            <p>我要帮助</p>
          </div>
        </div>
      </div>
    </div>
    <div class="content-bot">
      <div class="con">
        <div class="con-top">
          <img src="../images/totiao.png" alt="" />
          <p>关于我行对符合条件的账户<span></span></p>
          <p>更多<i class="iconfont icon-right"></i></p>
        </div>
        <img src="../images/zhong.png" alt="" />
      </div>
      <div class="lift">
        <h2>生活门店</h2>
        <div class="lift-img">
          <img src="../images/zhong2.png" alt="" />
        </div>
      </div>
      <div class="zx">
        <h2>资讯<i class="iconfont icon-"></i></h2>
        <div class="zx-items">
          <div class="item">
            <div class="item-title">
              <h2>关于调整我行ATM跨行取现手续费收费标准的公式</h2>
              <p>2021-07-23</p>
            </div>
            <img src="../images/item-1.png" alt="" />
          </div>
          <div class="item">
            <div class="item-title">
              <h2>关于调整我行ATM跨行取现手续费收费标准的公式</h2>
              <p>2021-07-23</p>
            </div>
            <img src="../images/item-1.png" alt="" />
          </div>
          <div class="item">
            <div class="item-title">
              <h2>关于调整我行ATM跨行取现手续费收费标准的公式</h2>
              <p>2021-07-23</p>
            </div>
            <img src="../images/item-1.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="tap">
      <div class="tap-item">
        <img src="../images/bot-1.png" alt="" />
        <p>主页</p>
      </div>
      <div class="tap-item">
        <img src="../images/bot-2.png" alt="" />
        <p>主页</p>
      </div>
      <div class="tap-item">
        <img src="../images/bot-3.png" alt="" />
        <p>主页</p>
      </div>
      <div class="tap-item">
        <img src="../images/bot-4.png" alt="" />
        <p>主页</p>
      </div>
    </div>
  </body>
</html>
<script type="text/javascript">
  function adapter() {
    //获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
    const dpWidth = document.documentElement.clientWidth
    //计算根字体大小
    const rootFonstSize = (dpWidth * 100) / 1125
    //设置根字体大小
    document.documentElement.style.fontSize = rootFonstSize + 'px'
  }
  adapter()
  window.onresize = adapter
</script>
